<template>
	<view class="body" v-if='showmain'>
		<uni-nav-bar status-bar=true fixed=true color="#fff" right-text="退出登录" title="个人中心"  background-color="#37c0b9"
		 @clickRight="logout"></uni-nav-bar>

		<view class="user-info">
			<view class="user-info-img">
				<image @click="upload" :src="userImg" mode="widthFix"  v-bind:class="[orientation == 'left' ? 'change' : '']"></image>
			</view>
			<view class="zhanwei">{{username}}</view>

		</view>


		<view @click="todzdp" class="item">
			<view class="icon">
				<image src="../../static/imgs/jiangbei.png" mode="widthFix" ></image>
			</view>
			<view class="text">
				答题记录
			</view> 

		</view>

	</view>
</template>

<script>
	import api from '@/pages/utils/api.js';
	import compressImage from '@/pages/utils/common.js';
	const device = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				userImg: "/static/imgs/moren.jpg",
				username: "",
				orientation:'',
				showmain:false
			}  
		}, 
		mounted() {

		},
		onShow() {
			let a = uni.getStorageSync("token");
			if (!a) {
				uni.showModal({
					title: '提示',
					content: '请登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "../login-app/login-app"
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/index/index'
							}); 
						}
					}
				});
				return;
			}
			
			// 获取用户头像和姓名
			let vm = this;
			vm.showmain = true;
			api.getMemberInfo({}).then((res) => {
				console.log(res)
				vm.username = res.data.username
				if(res.data.avatar){
					vm.userImg = res.data.avatar 
				}
				
				uni.getImageInfo({
				    src:vm.userImg,
				    success: function (image) {
				       
						if(image.orientation=='left' || image.orientation=='right'){
							vm.orientation=image.orientation
						}
				    }
				})
				
			})
		},

		methods: {
			toback: function() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			todzdp: function() {

				uni.navigateTo({
					url: '/pages/member/price-list/price-list'

				})
			},
			logout: function() {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '确定退出登陆吗',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token');
							uni.showLoading({
								title: '正在退出...'
							});

							setTimeout(function() {
								uni.hideLoading();
								uni.switchTab({
									url: '/pages/index/index'
								});
								that.username = '';
								that.userImg = "";
							}, 2000);

						} else if (res.cancel) {

						}
					}
				});

			} ,
			//上传头像
			upload: function() {
				let vm = this;
				console.log(uni.getStorageSync("token"))
				uni.chooseImage({
					count: 1,
					sourceType:['album'],
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: async (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths; 
						
						let tempPathList = [];						
						for (let i = 0; i < tempFilePaths.length; i++) {
							const path = tempFilePaths[i];						
							const src = await this.compressImageHandler(path)
							tempPathList.push(src);
						};
						console.log(tempPathList)
						
						tempPathList.forEach((val, ind) => {
							//压缩头像
							uni.compressImage({
							  src: tempPathList[ind],
							  quality: 10,
							  success: res => {
							    console.log(res.tempFilePath)
								uni.uploadFile({
									url: 'http://wt.wanpinhui.tech/api/uploader',
									filePath: res.tempFilePath,
									name: 'images',
									success: (uploadFileRes) => {
										const res = JSON.parse(uploadFileRes.data)
										console.log(res)
										if (res.code == 1) {
											vm.userImg = res.data;
											api.updateInfo({
												avatar: res.data
											}).then(res => {
												console.log(res)
												if(res.code == 1){
													uni.showToast({
														icon: 'none',
														title: '头像更新成功'
													})
												}
											});
											
										} else {
											uni.showToast({
												icon: 'none',
												title: res.msg
											})
										}
									}
								})
							  }
							})
						})
					}
				});
			},
			async compressImageHandler(src){
				const tempPath = await compressImage(src,device.platform);
				return tempPath
			}
		}
	}
</script>

<style scoped>
	.user-info {
		/* background: url(../../static/imgs/mpg.png) no-repeat; */
		background-color: #37c0b9;
		background-size: cover;
		background-attachment: fixed;
		width: 100%;
		height: 400rpx;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.user-info-img {
		width: 150rpx;
		height: 150rpx;
		border: 6rpx solid #37c0b9;
		border-radius: 80rpx;
		color: #00A0EA;
		overflow: hidden;
	}

	.user-info-img image {
		width: 100%;
	}

	.zhanwei {
		color: #fff;
		font-weight: 800;
	}

	.main {
		/* margin: 0 auto; */
		width: 100rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.change{
		transform: rotate(90deg);
		transition: transform 0.1s ease-out;
	}
	.change1{
		transform: rotate(270deg);
		transition: transform 0.1s ease-out;
	}

	.main text {
		color: #ddd;
		font-size: 35rpx;

	}

	.text {
		font-size: 35rpx;
	}

	.icon {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
	}

	.icon image {
		width: 100%;
	}

	.item {
		box-sizing: border-box;
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		padding: 20rpx;
		border-bottom: 1px solid #ededed;
		display: flex;
		align-items: center;
	}
</style>
